<template>
  <div>
    <div class="allsearch">
      <section class="search-content">
        <el-row :gutter="4" type="flex" justify="start">
          <el-col :span="24">
            <el-select
              v-model="listQuery.topicstatus"
              placeholder="话题状态"
              style="width:120px;"
              @change="handleFilter"
            >
              <el-option
                v-for="item in state"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
            <el-select
              v-model="listQuery.property"
              placeholder="属性"
              style="width:120px;"
              @change="handleFilter"
            >
              <el-option
                v-for="item in classify"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
            <el-input
              v-model="listQuery.team"
              style="width:180px;"
              placeholder="所属小组"
              @keyup.enter.native="handleFilter"
            />
            <el-input
              v-model="listQuery.someword"
              style="width:180px;"
              placeholder="话题名称关键词"
              @keyup.enter.native="handleFilter"
            />
            <el-input
              v-model="listQuery.creator"
              style="width:140px;"
              placeholder="创建者"
              @keyup.enter.native="handleFilter"
            />
            <el-button type="primary" size="medium" @click="handleFilter" >搜索</el-button>
            <el-button size="medium" type="info" @click="clearParams">清空</el-button>
          </el-col>
        </el-row>
      </section>
    </div>
    <el-table
      :table-label="tableLabel"
      :table-data="tableData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
    >
      <el-table-column slot="button" :min-width="2" label="操作" prop="manage" align="center">
        <template slot-scope="scope">
          <el-dropdown
            split-button
            type="primary"
            @command="handleCommand($event,scope)"
            @click="handleClick(scope.row)"
          >查看
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="scope.row.status === 'open'" command="1">关闭话题</el-dropdown-item>
              <el-dropdown-item v-if="scope.row.status === 'close'" command="2">开启话题</el-dropdown-item>
              <el-dropdown-item v-if="scope.row.status === 'close'" command="3">永久删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <el-table-column slot="isPro" :min-width="4" label="属性" prop="property" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.stick" @change="changeProperty(scope.row)">置顶</el-checkbox>
          <el-checkbox v-model="scope.row.elite" @change="changeProperty(scope.row)">加精</el-checkbox>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
  </div>
</template>

<script>
import ElTable from '@/components/Eltable'
import Pagination from '@/components/Pagination' // 分页组件
import { scrollTo } from '@/utils/scrollTo' // 上下滑动组件
import { getTopicInformation, updateGroupTopic, deleteGroupTopic } from '@/api/operate/teamtopic.js' // 数据接口
import { getTenantId} from '@/utils/auth'
export default {
  components: {
    ElTable,
    Pagination,
    scrollTo
  },
  data() {
    return {
      listQuery: {
        topicstatus: '',
        property: '',
        team: '',
        creator: '',
        someword: ''
      },
      total: 0,
      currentpage: 1,
      pagesize: 10,
      listFilter: [],
      state: [
        {
          label: '话题状态',
          value: ''
        },
        {
          label: '已开启',
          value: '已开启'
        },
        {
          label: '已关闭',
          value: '已关闭'
        }],
      classify: [
        {
          label: '属性',
          value: ''
        },
        {
          label: '置顶',
          value: '置顶'
        },
        {
          label: '加精',
          value: '加精'
        }
      ],
      tableLabel: [
        {
          label: '编号', width: '1', prop: 'id'
        }, {
          label: '名称', width: '4', prop: 'title', isOpera: true
        }, {
          label: '创建者', width: '1', prop: 'userName'
        }, {
          label: '所属小组', width: '2', prop: 'groupName'
        }, {
          label: '回复数', width: '1', prop: 'replyNum'
        }, {
          label: '状态', width: '1', prop: 'statusStr'
        }
      ],
      tableData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 表格操作按钮
    handleCommand(command, scope) {
      if (command === '1') {
        scope.row.status = 'close'
        updateGroupTopic(scope.row).then(res => {
          this.getData()
        })
      } else if (command === '2') {
        scope.row.status = 'open'
        updateGroupTopic(scope.row).then(res => {
          this.getData()
        })
      } else if (command === '3') {
        this.$confirm(`永久删除话题(${scope.row.title})吗`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteGroupTopic(scope.row.id).then(res => {
            this.$notify({
              title: '成功',
              message: '话题删除成功！',
              type: 'success',
              duration: 2000
            })
            this.getData()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
      }
    },
    // 查看按钮
    handleClick(row) {
      this.$message(`查看的是${row.id}`)
    },
    handleSizeChange(val) {
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    // 筛选
    handleFilter() {
      this.tableData = this.listFilter.filter(item => {
        if (this.listQuery.topicstatus && item.statusStr !== this.listQuery.topicstatus) return false
        if (this.listQuery.property === '置顶' && item.elite) return false
        if (this.listQuery.property === '加精' && item.stick) return false
        if (this.listQuery.team && item.groupName.toLowerCase().indexOf(this.listQuery.team.toLowerCase()) === -1) return false
        if (this.listQuery.someword && item.title.toLowerCase().indexOf(this.listQuery.someword.toLowerCase()) === -1) return false
        if (this.listQuery.creator && item.userName.toLowerCase().indexOf(this.listQuery.creator.toLowerCase()) === -1) return false
        return true
      })
      this.total = this.tableData.length
    },
    clearParams() {
      this.listQuery.topicstatus = ''
      this.listQuery.property = ''
      this.listQuery.team = ''
      this.listQuery.someword = ''
      this.listQuery.creator = ''
      this.getData()
    },
    // 接口获取数据
    getData() {
      getTopicInformation(getTenantId()).then(response => {
        response.data.items.map(item => {
          if (item.status === 'open') item.statusStr = '已开启'
          if (item.status === 'close') item.statusStr = '已关闭'
        })
        this.tableData = response.data.items
        this.total = response.data.items.length
        this.listFilter = response.data.items
      })
    },
    // 属性变更接口
    changeProperty(row) {
      updateGroupTopic(row).then(res => {
        console.log('属性更改成功')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.allsearch {
  margin-top: 0px;
  padding: 0;
  .search-content {
    width: 100%;
  }
}
</style>
